<template>
  <border-box title="版本对比">
<!--    <span slot="titleRight">对比所有</span>-->
    <div>
      <div class="item" v-for="(item,index) in list" :key="item.id">
        <a-tag color="pink">版本{{list.length - index}}</a-tag>
        <div class="item-content">
          <div>{{item.createBy}}</div>
          <div class="item-content-time">{{item.createTime}}</div>
        </div>
        <div>
          <a-icon @click="versionCompare(index)" type="diff" theme="twoTone" title="对比"
                  style="font-size: 20px;cursor:pointer;margin-left:10px"/>
        </div>
        
      </div>
      <a @click="versionCompareAll()" type="diff" theme="twoTone" title=""
                  style="font-size: 20px;cursor:pointer;margin-left:10px">对比全部</a>
    </div>
    <a-modal title="版本比较"
             width="800px"
             :visible="showModel"
             :footer="null"
             @cancel="close"
             :zIndex="1000">
      <a-row type="flex">
        <a-col flex="1" v-if="this.preContent">
          <h3>对比版本</h3>
          <div class="half">
            <div v-html="preContent"></div>
          </div>
        </a-col>
        <a-col flex="1">
          <h3>当前版本</h3>
          <div class="half">
            <div v-html="curContent"></div>
          </div>
        </a-col>
      </a-row>
    </a-modal>
  </border-box>
</template>

<script>
  //版本对比
  import BorderBox from "./BorderBox";
  import {getAction} from "@/api/manage";
  import DiffMatchPatch from 'diff-match-patch';

  export default {
    name: "VersionCompareList",
    components: {BorderBox},
    props: ['params'],
    data() {
      return {
        showModel: false,
        list: [],
        preContent: '',
        curContent: ''
      }
    },
    created() {
      this.fetchVersionList();
    },
    methods: {
      fetchVersionList() {
        getAction('content/contentVersion/queryContentVersionList', this.params).then(res => {
          if (res.success) {
            this.list = res.result
          }
        })
      },
      versionCompare(index) {
        if (this.list.length < 2 || index === this.list.length - 1) {
          this.$message.warning('当前没有版本可以比较');
          return;
        }
        const curContent = this.replaceHtml(this.list[index].content);
        this.preContent = this.replaceHtml(this.list[index + 1].content);
        const dmp = new DiffMatchPatch();
        const diff = dmp.diff_main(this.preContent, curContent);
        this.curContent = this.convertToHtml(diff);
        this.showModel = true;
      },
      replaceHtml(str){
          return str.replace(/<\/?.+?\/?>/g,'');
      },
      convertToHtml(diffs) {
        let html = [];
        console.log(diffs);
        for (let x = 0; x < diffs.length; x++) {
          const op = diffs[x][0];
          const text = diffs[x][1];
          switch (op) {
            case 1:
              html[x] = this.changeInsStyle(text);
              break;
            case -1:
              html[x] = this.changeDelStyle(text);
              break;
            case 0:
              html[x] = text;
              break;
          }
        }
        return html.join('');
      },
      versionCompareAll(){
        // if (this.list.length < 2 ) {
        //   this.$message.warning('当前没有版本可以比较');
        //   return;
        // }
        var version1 = ""
        var version2 = ""
        // for( let i = 0 ; i<this.list.length -1 ; i++){
        //   if(i == 0 ){
        //     version1 = this.replaceHtml(this.list[i].content);
        //   }
        //   version2 = this.replaceHtml(this.list[i+1].content);
        //   const dmp = new DiffMatchPatch();
        //   var diff = dmp.diff_main(version1, version2);
        //   version1 = this.convertToHtml(diff);
        // }
        version2 = this.replaceHtml(this.list[0].content);
        version1 = this.replaceHtml(this.list[this.list.length-1].content);
        const dmp = new DiffMatchPatch();
        var diff = dmp.diff_main(version1, version2);
        version1 = this.convertToHtml(diff);

        this.curContent = version1;
        this.preContent = ""
        this.showModel = true;
    
      },
      changeInsStyle(text) {
        const pattern = /(<\/?[a-z]>)+/g;
        const matches = text.matchAll(pattern);
        let result = '';
        const arr = Array.from(matches);
        if (arr.length === 0) {
          return '<ins style="background:#e6ffe6;">' + text + '</ins>';
        }
        let lastEnd = 0;
        arr.forEach((match, index) => {
          const start = match.index;
          const end = match.index + match[0].length;
          const text1 = text.substring(lastEnd, start);
          const text2 = text.substring(start, end);
          if (text1) {
            result += '<ins style="background:#e6ffe6;">' + text1 + '</ins>';
          }
          result += text2;
          lastEnd = end;
          if (index === arr.length - 1) {
            const lastText = text.substring(end);
            if (lastText) {
              result += '<ins style="background:#e6ffe6;">' + lastText + '</ins>';
            }
          }
        });
        return result;
      },
      changeDelStyle(text) {
        const pattern = /(<\/?[a-z]>)+/g;
        const matches = text.matchAll(pattern);
        const arr = Array.from(matches);
        if (arr.length === 0) {
          return '<del style="background:#ffe6e6;">' + text + '</del>';
        }
        let result = '';
        let lastEnd = 0;
        arr.forEach((match, index) => {
          const start = match.index;
          const end = match.index + match[0].length;
          const text1 = text.substring(lastEnd, start);
          if (text1) {
            result += '<del style="background:#ffe6e6;">' + text1 + '</del>';
          }
          result += text.substring(start, end);
          lastEnd = end;
          if (index === arr.length - 1) {
            const lastText = text.substring(end);
            if (lastText) {
              result += '<del style="background:#ffe6e6;">' + lastText + '</del>';
            }
          }
        });
        return result;
      },
      close() {
        this.showModel = false;
      }
    }
  }
</script>

<style scoped lang="less">
  .item {
    display: flex;
    align-items: center;

    &-content {
      flex: 1;

      &-time {
        color: #999999;
      }
    }
  }

  .half {
    margin: 0 auto;
    width: 75%;
    border-radius: 20px;
    box-shadow: 2px 2px 5px 5px #ededed;
    height: 500px;
    overflow-y: auto;
    padding: 20px;
  }

  .half img {
    max-width: 100%;
  }

</style>